<template>
	<view class="text-input-container">
		<view class="input-title">{{ title }}</view>
		<view class="textarea-box">
			<textarea v-model="content" class="textarea" placeholder="选填" :maxlength="maxLength" cursor-color="#FF6084" />
			<view class="word-count">{{ contentLength }}/{{ maxLength }}</view>
		</view>
		<view class="upload_box">
			<upload v-model="picList" :count="2" :sourceType="['album', 'camera']" uploadUrl="/api/mall/order/uploadPic"></upload>
			<view class="upload_tips">上传图片，最多2张。</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 响应式数据
const title = ref('');
const content = ref('');
const picList = ref([]);
const maxLength = ref(200);
const contentLength = computed(() => content.value.length);

interface Props {
	title: string;
	content: string;
	picList: string[];
}

const init = (data: Props) => {
	content.value = data.content;
	title.value = data.title;
	picList.value = data.picList;
};

const confirm = () => {
	return {
		content: content.value,
		picList: picList.value
	};
};

defineExpose({
	init,
	confirm
});
</script>

<style lang="scss">
.text-input-container {
	padding: 40rpx 32rpx;
	background-color: #fff;
	border-radius: 24rpx 24rpx 24rpx 24rpx;

	.input-title {
		margin-bottom: 16rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #1a1a1a;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #f5f6f7;
		margin-bottom: 40rpx;
	}

	.textarea-box {
		position: relative;
		background-color: #f8f8f8;
		padding: 32rpx;
		min-height: 200rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.textarea {
			width: 100%;
			height: 160rpx;
			font-size: 30rpx;
			line-height: 1.5;
		}

		.word-count {
			position: absolute;
			bottom: 32rpx;
			right: 32rpx;
			font-size: 26rpx;
			color: #999;
		}
	}

	.upload_box {
		background-color: #fff;
		margin-top: 24rpx;

		.upload_tips {
			font-size: 24rpx;
			color: #7c807f;
			margin-top: 40rpx;
		}
	}
}
</style>
